<template>
  <div class="container">
    <test-forms :modelValue="modelForm" :rules="rules" :list="list" ref="refEl">
      <template #provinceSlot>
        <span> 省份<span style="color: red">全程</span> </span>
      </template>
      <template #school>
        <el-input v-model="modelForm.school"></el-input>
      </template>
      <template #footer>
        <div>
          <el-button type="primary" @click="submit(refEl)">提交</el-button>
          <el-button @click="reset(refEl)">取消</el-button>
        </div>
      </template>
    </test-forms>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue'
import testForms from './test-forms.vue'
import { mockData } from './create-data'
import { ElLoading } from 'element-plus'
// import { FormsItem } from './test-forms.d'
const modelForm = reactive({
  name: '',
  gender: '',
  status: '',
  project: '',
  school: ''
})
watch(
  () => modelForm.status,
  () => {
    modelForm.project = ''
  }
)
const list = ref();
const getList = () => {
  const loadingInstance = ElLoading.service({fullscreen: true})
  mockData().then(res => {
    list.value = res
  }).finally(() => {
    loadingInstance.close()
  })
}
onMounted(() => {
  getList()
})
const rules = {
  name: [{ required: true, message: 'plz input', trigger: 'blur' }],
  gender: [{ required: true, message: 'plz select', trigger: 'change' }]
}
const refEl = ref()
const submit = (refEl) => {
  refEl.elFormRef.validate((valid, field) => {
    if (valid) {
      console.log(modelForm)
    } else {
      console.log(field)
    }
  })
}
const reset = (refEl) => {
  refEl.elFormRef.resetFields()
}
</script>
<style lang="scss" scoped>
.container {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  padding: 10px;
}
</style>
